import { defineStore } from 'pinia';

export const useScreenStore = defineStore('screen', () => {
	// 屏幕宽度
	const screenWidth = ref<number>(window.innerWidth);

	// 屏幕尺寸
	const screenSize = computed(() => {
		if (screenWidth.value < 768) {
			return 'xs';
		} else if (screenWidth.value <= 992) {
			return 'sm';
		} else if (screenWidth.value <= 1200) {
			return 'md';
		} else {
			return 'lg';
		}
	});

	onBeforeMount(() => {
		window.addEventListener('resize', () => {
			screenWidth.value = window.innerWidth;
		});

		screenWidth.value = window.innerWidth;
	});

	return {
		screenSize,
		screenWidth,
	};
});
